<template>
  <div class="nav-select">
 <!-- 遮罩层 -->
<van-overlay :show="show" >
<div class="wrapper" >
 <div class="block"/>
  </div>
  <template #default>
   <!-- 区域 -->
      <div class="my-search" v-if="homeIsShow">
       <van-picker
       @cancel="myCancel"
       @confirm="wayConfirm"
       item-height="30px"
      toolbar-position="bottom"
       show-toolbar
      :columns="wayColumns"
   >
   <template #confirm>
             <div class="buttomConfirm">确定</div>
   </template>
     <template #cancel>
             <div class="buttomCancel">取消</div>
   </template>
       </van-picker>
      </div>
      <!-- 方式 -->
      <div class="my-search" v-if="wayIsShow">
       <van-picker
       @cancel="myCancel"
       @confirm="wayConfirm"
       item-height="30px"
      toolbar-position="bottom"
       show-toolbar
      :columns="wayColumns"
   >
   <template #confirm>
             <div class="buttomConfirm">确定</div>
   </template>
     <template #cancel>
             <div class="buttomCancel">取消</div>
   </template>
       </van-picker>
      </div>
      <!-- 租金 -->
      <div class="my-search" v-if="friendsIsShow">
       <van-picker
       @cancel="myCancel"
       @confirm="wayConfirm"
       item-height="30px"
      toolbar-position="bottom"
       show-toolbar
      :columns="wayColumns"
   >
   <template #confirm>
             <div class="buttomConfirm">确定</div>
   </template>
     <template #cancel>
             <div class="buttomCancel">取消</div>
   </template>
       </van-picker>
      </div>
      <!-- 筛选 -->

  </template>
</van-overlay>
<!--  -->
 <van-popup  overlay-class="Masked" v-model="rightShow" position="right" :style="{ height: '100%' ,width: '80%'}"
 class="Masked"
 get-container="#app">
 <div class="my-loops">
   <div class="house-type">户型</div>
  <div class="house-type-woshi">

    <van-grid :gutter="20" :column-num="2">
  <van-grid-item v-for="value in familyarr" :key="value"  :text="value" />
   </van-grid>
   <div class="house-type">朝向</div>
  <van-grid :gutter="20" :column-num="2">
  <van-grid-item v-for="value in familyarr" :key="value"  :text="value" />
   </van-grid>
  <div class="house-type">楼层</div>
  <van-grid :gutter="20" :column-num="2">
  <van-grid-item v-for="value in familyarr" :key="value"  :text="value" />
   </van-grid>
  </div>
 </div>
 </van-popup>

  <div class="drop" >

     <div class="dropdown-menu">
  <van-tabbar v-model="active" :fixed="false">
  <van-tabbar-item name="home" @click="unfold('home')" ><div>区域<span>▼</span></div></van-tabbar-item>
  <van-tabbar-item name="search" @click="unfold('search')"> <div>方式 <span>▼</span></div></van-tabbar-item>
  <van-tabbar-item name="friends" @click="unfold('friends')" ><div>租金 <span>▼</span></div></van-tabbar-item>
  <van-tabbar-item name="setting" @click="unfold('setting')" ><div>我的 <span>▼</span></div></van-tabbar-item>
  </van-tabbar>
      </div>
  </div>
    </div>
</template>

<script>
import { areaSon, listItem } from '@/api/listItem'

import { getTokenID } from '@/utils/stroageid'
export default {
  name: 'Navselect',
  data () {
    return {
      /* 右侧弹出框 */
      rightShow: false,
      show: false,
      active: '',
      wayIsShow: false,
      friendsIsShow: false,
      // 显示区域
      homeIsShow: false,
      wayColumns: [],
      areahome: [
        {
          text: '区域',
          children: [
            {
              text: '不限',
              children: [{ text: '不限' }, { text: '' }]
            }
          ]
        },
        {
          text: '地铁',
          children: [
            {
              text: '无地铁',
              children: [{ text: '' }]
            }
          ]
        }
      ],
      /*  */
      familyarr: ['一室', '二室', '三室', '四室', '四室+']
    }
  },
  async created () {
    const data = await listItem({ id: getTokenID(), subway: 'subway-地铁' })
    console.log(data)
    const { body } = await areaSon({ id: getTokenID() })
    body.forEach(item => {
      item.text = item.label
    })
    console.log(body)
    this.areahome[0].children = [...this.areahome[0].children, ...body]
  },
  methods: {
    /*  */

    // 功能
    unfold (val) {
      if (val) {
        this.show = true
      }
      if (val === 'search') {
        this.wayColumns = ['不限', '整租', '合租']
        this.wayIsShow = !this.wayIsShow
      } else {
        this.wayIsShow = false
      }
      if (val === 'friends') {
        this.wayColumns = ['不限', '1000及以下', '1000-2000', '2000-3000', '3000-4000', '4000-5000', '5000-7000', '7000及以上']
        this.friendsIsShow = !this.friendsIsShow
      } else {
        this.friendsIsShow = false
      }
      if (val === 'home') {
        this.wayColumns = this.areahome
        this.homeIsShow = !this.homeIsShow
      } else {
        this.homeIsShow = false
      }
      if (val === 'setting') {
        this.rightShow = true
      }
      if (!this.wayIsShow && !this.friendsIsShow && !this.homeIsShow) {
        this.show = false
      }
    },
    // 方式下拉框确认按钮
    wayConfirm (val) {
      this.wayIsShow = false
      this.friendsIsShow = false
      this.homeIsShow = false
      this.show = false
    },
    // 方式下拉框取消按钮
    myCancel () {
      this.wayIsShow = false
      this.friendsIsShow = false
      this.homeIsShow = false
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.drop {
 height: 50px;
 .dropdown-menu{
margin-bottom: 16px;
.van-tabbar-item{
  height: 28px;
  span{
    font-size: 2px;
  }
}
 }
 .my-search{
  position: absolute;
  top: 80px;
  width: 100%;
  background-color: #fff !important;
  .van-picker__confirm{
  width: 240px;
  background-color: gray !important;
}
/*  */
.buttomConfirm{
  z-index: 4;
  float: right;
  position: relative;
    right: -16px;
    width: 260px;
    height: 50px;
  background-color: #21b97a !important;
      line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: #fff;
}
.buttomCancel{
  float: left;
  position: absolute;
  bottom: -5px;
  left: -10px;
  width: 126px;
  background-color: #fff ;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color:#21b97a;
  border-top: 2px solid #ccc;
}
 }
}
.my-search{
    position: absolute;
    top: 73px;
    width: 100%;
}
 .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
  .Masked{
    .my-loops {
      padding: 0px 18px;
      margin-bottom: 10px;
      border-bottom: 1px solid #999;
      .house-type{
        margin: 20px auto;
      }
    }
  }
</style>
